<template>
  <div>
    <div class="deepBackground">
      <!--  图表显示区域  -->
      <div style="display: flex;justify-content: left;align-items: center;height: 24%;width: 100%;margin: 12px">
        <!--        管理项目进度、管理项目任务分类-->
        <div
            style="margin-top: 12px;margin-left:12px;margin-bottom:12px;display: flex;width: 60%;height: 100%;align-items: center;justify-content: center;border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); ">

          <div style="display: flex;margin: 12px;justify-content: left;width: 50%;flex-direction: column">
            <span style="font-size: 12px;font-family: 'PingFang SC';font-weight: bolder;color: darkgray;margin: 6px">
              管理项目进度
            </span>
            <el-select v-model="projectScheduleValue" placeholder="请选择项目" style="margin: 6px">
              <el-option
                  v-for="item in projectSelectOptions"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId">
              </el-option>
            </el-select>

            <el-progress :text-inside="true" :stroke-width="26" :percentage="70" style="margin: 6px"></el-progress>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div style="display: flex;margin: 12px;justify-content: left;width: 50%;flex-direction: column">
            <!--            <span style="font-size: 12px;font-family: 'PingFang SC';font-weight: bolder;color: darkgray;margin: 6px">
                          项目任务详情分布
                        </span>
                        <el-select v-model="taskAttributeValue" placeholder="请选择任务属性" style="margin: 6px">
                          <el-option
                              v-for="item in taskAttributeSelectOptions"
                              :key="item.projectId"
                              :label="item.projectName"
                              :value="item.projectId">
                          </el-option>
                        </el-select>-->
            <!--扇形图表-->
            <div
                style="height: 100%; width: 100%;display: flex; align-items: center;justify-content: center;"
                id="pie"
            >

            </div>
          </div>


        </div>
        <!--        打工人排行榜-->
        <div
            style="margin:12px;display: flex;flex-direction: column; width: 40%;height: 100%;justify-content: left;border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
          <span
              style="font-size: 18px;font-weight: bolder;font-family: 'PingFang SC';margin-top:6px;margin-left:6px;margin-right:6px;">
            员工排行榜
             <el-select v-model="staffProjectSelectleValue" placeholder="请选择项目" style="margin: 6px">
              <el-option
                  v-for="item in projectSelectOptions"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId">
              </el-option>
            </el-select>
            <el-button icon="el-icon-search" circle @click="getEmployeeRanking"></el-button>
            <el-button icon="el-icon-refresh" circle @click="reSetEmployeeRanking"></el-button>
          </span>
          <div style="width: 100%">
            <el-table
                :data="EmployeeRankingData"
                style="width: 97%;margin: 12px"
                stripe
                height="150px"
            >
              <!--下标-->
              <el-table-column
                  type="index"
                  width="auto">
              </el-table-column>

              <el-table-column
                  prop="uid"
                  label="用户Id"
                  width="auto">
              </el-table-column>
              <el-table-column
                  prop="infoName"
                  label="姓名"
                  width="auto">
              </el-table-column>
              <el-table-column
                  prop="numOfCompleted"
                  width="auto"
                  label="完成任务数">
              </el-table-column>

              <el-table-column
                  prop="projectName"
                  width="auto"
                  label="项目名称">
              </el-table-column>

              <el-table-column
                  prop="performance"
                  width="auto"
                  label="绩效">
              </el-table-column>
            </el-table>
          </div>


        </div>
      </div>
      <div style="height: 73%;margin: 4px;width: 100%">
        <el-tabs type="border-card" stretch="true" style="margin: 6px;height: 98%" v-model="tabsActiveName">
          <el-tab-pane style="width: 100%;height: 65vh" name="taskOverview">
            <span slot="label"><i class="el-icon-files"></i> 任务总览</span>
            <div style="display: flex;flex-direction: column;margin: 12px;height: 100px;width: 100%">

              <!--              条件搜索区域-->
              <div style="display: flex;align-items: center;justify-content: center;width: 100%; height: 12vh">
                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">所属项目:</span>
                  <el-select v-model="projectSelectValue" placeholder="请选择所属项目">
                    <el-option
                        v-for="item in projectSelectOptions"
                        :key="item.projectId"
                        :label="item.projectName"
                        :value="item.projectId">
                    </el-option>
                  </el-select>

                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">任务类型:</span>
                  <el-select v-model="taskTypeSelectValue" placeholder="请选择任务类型">
                    <el-option
                        v-for="item in taskTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">任务级别:</span>
                  <el-select v-model="taskPrioritySelectValue" placeholder="请选择任务级别">
                    <el-option
                        v-for="item in taskPriorityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <el-button type="primary" style="width: 37%;margin: 12px" @click="taskConditionalQueryByPage">搜索
                  </el-button>
                  <el-button style="width: 37%;margin: 12px" @click="conditionReset">重置
                  </el-button>
                </div>
              </div>
              <!--              表格展示区域-->
              <div style="display: flex;flex-direction: column;height: 53vh;width: 100%;margin: 12px">
                <div
                    style="display: flex;align-items: center;justify-content: center;height: 10%;margin: 6px;width: 100%">

                  <div style="display: flex;align-items: center;justify-content: left;width: 50%">
                    <Span
                        style="font-size: 24px;font-family: 'PingFang SC';font-weight: bolder;margin-left: 12px">任务总览</Span>
                  </div>

                  <div style="display: flex;align-items: center;justify-content: center;width: 50%">
                    <!--              任务状态选择-->
                    <el-radio-group v-model="tabPosition">
                      <el-radio-button label="all" @click.native="changeTab('all')">全部</el-radio-button>
                      <el-radio-button label="done" @click.native="changeTab('done')">已完成</el-radio-button>
                      <el-radio-button label="undo" @click.native="changeTab('undo')">未完成</el-radio-button>
                      <el-radio-button label="handUp" @click.native="changeTab('handUp')">挂起</el-radio-button>
                      <el-radio-button label="unTest" @click.native="changeTab('unTest')">待测试</el-radio-button>
                      <el-radio-button label="testFailed" @click.native="changeTab('testFailed')">测试未通过
                      </el-radio-button>
                    </el-radio-group>
                    <!--              任务模糊查询-->
                    <el-input
                        placeholder="请选择任务id或者名称"
                        v-model="searchValue" style="width: 30%;margin-left: 10px;margin-right: 12px">
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" @click="selectTaskByIdOrName">搜索</el-button>

                  </div>
                </div>
                <!--                表格区域-->
                <el-table
                    :data="TaskTableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 98%;margin: 12px">
                  <el-table-column
                      label="任务Id"
                      prop="taskId">
                  </el-table-column>

                  <el-table-column
                      label="任务名称"
                      prop="taskName">
                  </el-table-column>

                  <el-table-column
                      label="所属项目"
                      prop="projectId">
                    <!--              <template slot-scope="scope3">
                               {{escapeProjectNameById(row.projectId)}}
                                  </template>-->
                  </el-table-column>

                  <el-table-column
                      label="优先级"
                      prop="taskPriority">
                    <template slot-scope="scope">
                      <el-tag
                          :type="switchTaskPriority(scope.row.taskPriority).tagStyle"
                          disable-transitions
                          effect="dark"
                      >{{ switchTaskPriority(scope.row.taskPriority).priorityName }}
                      </el-tag>

                    </template>
                  </el-table-column>

                  <el-table-column
                      label="任务类型"
                      prop="taskStatus">

                    <template slot-scope="scope1">
                      <el-tag
                          type="info"
                          effect="plain"
                          disable-transitions>
                        <i :class="switchTaskType(scope1.row.taskType).iconStyle"></i>
                        {{ switchTaskType(scope1.row.taskType).typeName }}
                      </el-tag>
                    </template>

                  </el-table-column>

                  <el-table-column
                      label="当前状态"
                      prop="taskStatus">
                    <template slot-scope="scope2">
                      <el-tag
                          hit="false"
                          :color="switchTaskStatus(scope2.row.taskStatus).color"
                          disable-transitions
                          effect="dark"
                      >{{ switchTaskStatus(scope2.row.taskStatus).statusName }}
                      </el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                      label="任务经办人Id"
                      prop="currentTaskHandlerId">
                  </el-table-column>


                  <el-table-column
                      label="操作"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="viewTaskDetails(scope.row.taskId)">查看详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--                分页组件-->
                <div style="display: flex;align-items: center;justify-content: center;margin: 6px">
                  <el-pagination
                      class="pagination"
                      background
                      layout="prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="change"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>


          <el-tab-pane style="width: 100%;height: 65vh" name="projectPersonnelAllocation">
            <span slot="label"><i class="el-icon-user-solid"></i> 项目人员分配</span>
            <div style="display: flex;flex-direction: column;width: 100%;height: 100%">
              <!--              标题-->
              <div
                  style="display: flex;justify-content: left;font-size: 24px;font-family: 'PingFang SC';font-weight: bolder;margin-left: 12px">
                项目人员分配
              </div>
              <!--              项目选中和项目详情展示-->
              <div
                  style="display: flex;flex-direction: column;margin: 12px;justify-content: left;height: 25%;width: 100%">
                <span style="font-size: 12px;font-family: 'PingFang SC';font-weight: bolder">
                  人员分配项目：
                  <el-select v-model="projectPersonnelAllocationValue" placeholder="请选择项目" size="medium"
                             style="width: 20%">
                          <el-option
                              v-for="item in projectSelectOptions"
                              :key="item.projectId"
                              :label="item.projectName"
                              :value="item.projectId">
                               </el-option>
                         </el-select>
                        <el-button style="margin-left: 12px" @click="getAllShowDataForDistribution">确认</el-button>
                  <el-button type="info" @click="reSetProjectPersonnelAllocation">重置</el-button>

                </span>
                <!--                项目详情展示-->
                <div style="display: flex;width: 100%;height: 100%;align-items: center;justify-content: center">
                  <el-descriptions class="margin-top" column="3"
                                   style="width: 98%; margin-top: 12px;margin-bottom: 12px" border>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-coordinate"></i>
                        项目id
                      </template>
                      {{ projectInfo.projectId }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-time"></i>
                        项目状态
                      </template>
                      <el-tag size="small" type="info">
                        {{ projectInfo.projectStatusName }}
                      </el-tag>
                    </el-descriptions-item>


                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-s-custom"></i>
                        项目创建人
                      </template>
                      <el-tag size="small">
                        {{ projectInfo.createUserName }}
                      </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        项目组长
                      </template>
                      <el-tag size="small">
                        {{ projectInfo.projectLeaderName }}
                      </el-tag>
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-time"></i>
                        创建时间
                      </template>
                      {{ showDate.crateDate }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-time"></i>
                        完成时间
                      </template>
                      {{ showDate.completeDate }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-wallet"></i>
                        项目名称
                      </template>
                      {{ projectInfo.projectName }}
                    </el-descriptions-item>


                  </el-descriptions>
                </div>
              </div>


              <div
                  style="display: flex;margin: 12px;justify-content: center;align-items: center">

                <!--                当前项目所有员工信息展示-->
                <div
                    style="margin: 12px;display: flex;height: 340px; width:50%;flex-direction: column;justify-items: center; background-color: white;border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
                  <span
                      style="font-size: 12px;font-family: 'PingFang SC';font-weight: bolder;margin: 12px">项目组员信息</span>
                  <el-table
                      :data="projectUsersList"
                      height="290px"
                      style="width: 100%">
                    <el-table-column
                        prop="uid"
                        label="员工Id"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="infoName"
                        label="姓名"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="roleName"
                        label="职位">
                    </el-table-column>

                    <el-table-column
                        prop="depName"
                        label="部门">
                    </el-table-column>

                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="showUserInfo(scope.row.uid)"
                        >详情
                        </el-button>

                        <el-button
                            size="mini"
                            type="danger"
                            plain
                            @click="removeFormProject(scope.row.uid)">移除
                        </el-button>
                        <!--                        <el-popover
                                                    placement="top"
                                                    width="160"
                                                    v-model="delUserFormProjectVisible"
                                                    trigger="click"
                                                >
                                                  <p>你确定要移除当前组员吗？</p>
                                                  <div style="text-align: right; margin: 0">
                                                    <el-button size="mini" type="text" @click="delUserFormProjectVisible = false">取消</el-button>
                                                    <el-button type="primary" size="mini" @click="removeFormProject(scope.row.uid)">确定</el-button>
                                                  </div>
                                                  <el-button slot="reference" size="mini"
                                                             type="danger"
                                                             plain>移除</el-button>
                                                </el-popover>-->


                      </template>
                    </el-table-column>
                  </el-table>

                  <!--                 项目组员详细信息显示弹窗 -->
                  <el-dialog
                      title="详情"
                      :visible.sync="userInfoDialogVisible"
                      width="50%"
                  >
                    <div style="display: flex;width: 100%;align-items: center;justify-content: center">
                      <el-descriptions class="margin-top" title="员工详细信息" :column="3" size="medium" border>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-d-caret"></i>
                            用户Id
                          </template>
                          {{ userInfo.uid }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-user"></i>
                            用户名
                          </template>
                          {{ userInfo.name }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                          </template>
                          {{ userInfo.phone }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-edit"></i>
                            姓名
                          </template>
                          {{ userInfo.infoName }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-message"></i>
                            邮箱
                          </template>
                          {{ userInfo.email }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-male"></i>
                            <i class="el-icon-female"></i>
                            性别
                          </template>
                          {{ userInfo.gender }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-custom"></i>
                            职位
                          </template>
                          {{ userInfo.roleName }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-s-data"></i>
                            部门
                          </template>
                          {{ userInfo.depName }}
                        </el-descriptions-item>

                      </el-descriptions>
                    </div>


                    <span slot="footer" class="dialog-footer">
    <el-button @click="userInfoDialogVisible = false">关闭</el-button>
    <el-button type="primary" @click="userInfoDialogVisible = false">确 定</el-button>
  </span>
                  </el-dialog>
                </div>

                <!--                项目员工分配传输框-->
                <div style="width: 50%;display: flex;align-items: center;">
                  <el-transfer
                      style="text-align: left; display: inline-block; width: auto;margin-left: 72px"
                      v-model="projectAddUserList"
                      filterable
                      :titles="['员工列表', '新增项目组员']"
                      :button-texts="['取消添加', '添加入组']"
                      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
                      :data="allUserShowData">
                    <el-button class="transfer-footer" slot="right-footer" size="small" type="primary"
                               @click="addProjectMembers">添加
                    </el-button>
                    <el-button class="transfer-footer" slot="right-footer" size="small" type="danger">取消</el-button>
                  </el-transfer>
                </div>

              </div>

            </div>
          </el-tab-pane>

          <el-tab-pane style="width: 100%;height: 65vh" name="taskManagement">
            <span slot="label"><i class="el-icon-edit-outline"></i> 任务管理</span>
            <div style="display: flex;flex-direction: column;margin: 12px;height: 100px;width: 100%">

              <!--              条件搜索区域-->
              <div style="display: flex;align-items: center;justify-content: center;width: 100%; height: 12vh">
                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">所属项目:</span>
                  <el-select v-model="projectSelectValue" placeholder="请选择所属项目">
                    <el-option
                        v-for="item in projectSelectOptions"
                        :key="item.projectId"
                        :label="item.projectName"
                        :value="item.projectId">
                    </el-option>
                  </el-select>

                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">任务类型:</span>
                  <el-select v-model="taskTypeSelectValue" placeholder="请选择任务类型">
                    <el-option
                        v-for="item in taskTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">任务级别:</span>
                  <el-select v-model="taskPrioritySelectValue" placeholder="请选择任务级别">
                    <el-option
                        v-for="item in taskPriorityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div style="width: 30%; display: flex;align-items: center;justify-content: center">
                  <el-button type="primary" style="width: 37%;margin: 12px" @click="taskConditionalQueryByPage">搜索
                  </el-button>
                  <el-button style="width: 37%;margin: 12px" @click="conditionReset">重置
                  </el-button>
                </div>
              </div>
              <!--              表格展示区域-->
              <div style="display: flex;flex-direction: column;height: 53vh;width: 100%;margin: 12px">
                <div
                    style="display: flex;align-items: center;justify-content: center;height: 10%;margin: 6px;width: 100%">

                  <div style="display: flex;align-items: center;justify-content: left;width: 50%">
                    <Span
                        style="font-size: 24px;font-family: 'PingFang SC';font-weight: bolder;margin-left: 12px">
                      <el-button type="success" plain @click="showAddTask">添加任务</el-button>
                    </Span>
                  </div>

                  <div style="display: flex;align-items: center;justify-content: center;width: 50%">
                    <!--              任务状态选择-->
                    <el-radio-group v-model="tabPosition">
                      <el-radio-button label="all" @click.native="changeTab('all')">全部</el-radio-button>
                      <el-radio-button label="done" @click.native="changeTab('done')">已完成</el-radio-button>
                      <el-radio-button label="undo" @click.native="changeTab('undo')">未完成</el-radio-button>
                      <el-radio-button label="handUp" @click.native="changeTab('handUp')">挂起</el-radio-button>
                      <el-radio-button label="unTest" @click.native="changeTab('unTest')">待测试</el-radio-button>
                      <el-radio-button label="testFailed" @click.native="changeTab('testFailed')">测试未通过
                      </el-radio-button>
                    </el-radio-group>
                    <!--              任务模糊查询-->
                    <el-input
                        placeholder="请选择任务id或者名称"
                        v-model="searchValue" style="width: 30%;margin-left: 10px;margin-right: 12px">
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" @click="selectTaskByIdOrName">搜索</el-button>

                  </div>
                </div>
                <!--                表格区域-->
                <el-table
                    :data="TaskTableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 98%;margin: 12px">
                  <el-table-column
                      label="任务Id"
                      prop="taskId">
                  </el-table-column>

                  <el-table-column
                      label="任务名称"
                      prop="taskName">
                  </el-table-column>

                  <el-table-column
                      label="所属项目"
                      prop="projectId">
                    <!--              <template slot-scope="scope3">
                               {{escapeProjectNameById(row.projectId)}}
                                  </template>-->
                  </el-table-column>

                  <el-table-column
                      label="优先级"
                      prop="taskPriority">
                    <template slot-scope="scope">
                      <el-tag
                          :type="switchTaskPriority(scope.row.taskPriority).tagStyle"
                          disable-transitions
                          effect="dark"
                      >{{ switchTaskPriority(scope.row.taskPriority).priorityName }}
                      </el-tag>

                    </template>
                  </el-table-column>

                  <el-table-column
                      label="任务类型"
                      prop="taskStatus">

                    <template slot-scope="scope1">
                      <el-tag
                          type="info"
                          effect="plain"
                          disable-transitions>
                        <i :class="switchTaskType(scope1.row.taskType).iconStyle"></i>
                        {{ switchTaskType(scope1.row.taskType).typeName }}
                      </el-tag>
                    </template>

                  </el-table-column>

                  <el-table-column
                      label="当前状态"
                      prop="taskStatus">
                    <template slot-scope="scope2">
                      <el-tag
                          hit="false"
                          :color="switchTaskStatus(scope2.row.taskStatus).color"
                          disable-transitions
                          effect="dark"
                      >{{ switchTaskStatus(scope2.row.taskStatus).statusName }}
                      </el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column
                      label="任务经办人Id"
                      prop="currentTaskHandlerId">
                  </el-table-column>


                  <el-table-column
                      label="操作"
                      align="center"
                      width="250px"
                  >
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          plain
                          @click="showEditTask(scope.row)">编辑
                      </el-button>

                      <el-button
                          size="mini"
                          type="primary"
                          plain
                          @click="showSendTask(scope.row)">分配
                      </el-button>

                      <el-button
                          size="mini"
                          type="danger"
                          plain
                          @click="delTask(scope.row.taskId)">删除
                      </el-button>


                    </template>
                  </el-table-column>
                </el-table>
                <!--               编辑、添加、分配任务的弹窗 -->
                <!--                分配任务弹窗-->
                <el-dialog title="任务分配" :visible.sync="sendTaskVisible">
                  <el-table
                      :data="sendableUsers.filter(data => !sendableUsersSearch || data.infoName.toLowerCase().includes(assignableUsersSearch.toLowerCase()))"
                      style="width: 100%">
                    <el-table-column
                        label="员工Id"
                        prop="userId">
                    </el-table-column>
                    <el-table-column
                        label="姓名"
                        prop="infoName">

                      <template slot-scope="scope">
                        <el-tag
                            type="info"
                            disable-transitions
                        >{{ scope.row.infoName }}
                        </el-tag>
                      </template>

                    </el-table-column>
                    <el-table-column
                        label="在办任务数"
                        prop="progressTasksNum">
                      <template slot-scope="scope">
                        <el-tag
                            type="danger"
                            disable-transitions
                            effect="dark"
                        >{{ scope.row.progressTasksNum }}
                        </el-tag>
                      </template>

                    </el-table-column>
                    <el-table-column
                        label="邮箱"
                        prop="email">
                    </el-table-column>

                    <el-table-column
                        align="right">
                      <template slot="header" slot-scope="scope">
                        <el-input
                            v-model="sendableUsersSearch"
                            size="mini"
                            placeholder="输入姓名搜索"/>
                      </template>

                      <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="sendTask(scope.row.userId)">分配
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--              <el-table :data="this.assignableUsers">
                                  <el-table-column property="date" label="日期" width="150"></el-table-column>
                                  <el-table-column property="name" label="姓名" width="200"></el-table-column>
                                  <el-table-column property="address" label="地址"></el-table-column>
                                </el-table>-->
                </el-dialog>

                <!--                编辑任务弹窗-->
                <el-dialog title="编辑任务" :visible.sync="editTaskVisible">
                  <!--            编辑任务表单-->
                  <el-form :model="editTaskEntity" :rules="editTaskRules" ref="ruleForm" label-width="100px"
                           class="demo-ruleForm">
                    <el-form-item label="任务名称" prop="taskName">
                      <el-input v-model="editTaskEntity.taskName"></el-input>
                    </el-form-item>

                    <el-form-item label="所属项目" prop="projectId">
                      <el-select v-model="editTaskEntity.projectId" placeholder="请选择所属项目">
                        <el-option
                            v-for="item in projectList"
                            :label="item.projectName"
                            :value="item.projectId">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="优先级" prop="taskPriority">
                      <el-select v-model="editTaskEntity.taskPriority" placeholder="请选择任务优先级">
                        <el-option
                            v-for="item in taskPriorityList"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="任务描述" prop="desc">
                      <el-input type="textarea" v-model="editTaskEntity.taskDescription"></el-input>
                    </el-form-item>

                  </el-form>

                  <div slot="footer" class="dialog-footer">
                    <el-button @click="editTaskVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editTaskSubmit">确 定</el-button>
                  </div>
                </el-dialog>

                <!--                添加任务弹窗-->
                <el-dialog
                    title="添加任务"
                    :visible.sync="addTaskVisible">
                  <el-form :model="addTaskEntity" ref="ruleForm" label-width="100px"
                           class="demo-ruleForm">
                    <el-form-item label="任务名称" prop="taskName">
                      <el-input v-model="addTaskEntity.taskName"></el-input>
                    </el-form-item>

                    <el-form-item label="所属项目" prop="projectId">
                      <el-select v-model="addTaskEntity.projectId" placeholder="请选择所属项目">
                        <el-option
                            v-for="item in projectSelectOptions"
                            :label="item.projectName"
                            :value="item.projectId">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="任务类型" prop="taskType">
                      <el-select v-model="addTaskEntity.taskType" placeholder="请选择所属项目">
                        <el-option
                            v-for="item in taskTypeOptions"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="优先级" prop="taskPriority">
                      <el-select v-model="addTaskEntity.taskPriority" placeholder="请选择任务优先级">
                        <el-option
                            v-for="item in taskPriorityList"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <!--                    任务截至时间-->
                    <el-form-item label="任务截至时间" prop="deadlineTime">
                      <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="addTaskEntity.deadlineTime" style="width: 100%;"></el-date-picker>
                      </el-col>
                    </el-form-item>

                    <el-form-item label="任务描述" prop="desc">
                      <el-input type="textarea" v-model="addTaskEntity.taskDescription"></el-input>
                    </el-form-item>

                  </el-form>


                  <span slot="footer" class="dialog-footer">
    <el-button @click="addTaskVisible = false">取 消</el-button>
    <el-button type="primary" @click="addTask">添加</el-button>
  </span>
                </el-dialog>

                <!--                分页组件-->
                <div style="display: flex;align-items: center;justify-content: center;margin: 6px">
                  <el-pagination
                      class="pagination"
                      background
                      layout="prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="change"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

//饼图组件展示数据
const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
    // doesn't perfectly work with our tricks, disable it
    selectedMode: false
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start angle
      startAngle: 180,
      label: {
        show: true,
        formatter(param) {
          // correct the percentage
          return param.name + ' (' + param.percent * 2 + '%)';
        }
      },
      data: [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'},
        {
          // make an record to fill the bottom 50%
          value: 1048 + 735 + 580 + 484 + 300,
          itemStyle: {
            // stop the chart from rendering this piece
            color: 'none',
            decal: {
              symbol: 'none'
            }
          },
          label: {
            show: false
          }
        }
      ]
    }
  ]
};

export default {
  name: "TaskManagement",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")), //当前登录用户
      projectSelectOptions: [],//当前用户所管理的项目可选项

      projectScheduleValue: '',//管理项目进度选中
      staffProjectSelectleValue: '',//打工人排行榜项目选中
      taskAttributeValue: '', //选中的任务属性（任务优先级，任务类型，任务完成情况）
      projectPersonnelAllocationValue: '',//项目人员分配选中

      taskAttributeSelectOptions: [ //任务属性选项

      ],
      EmployeeRankingData: [], //打工人排行榜数据

      TaskTableData: [],//任务表的绑定数据

      //分页相关
      pageSize: 4, //设置默认值为5条一页
      total: 0,
      pageNum: 0,

      //task查询条件相关
      tabPosition: 'all',//任务状态的表格显示
      searchValue: '',//模糊查询绑定的数据
      projectSelectValue: '',  //项目查询条件
      taskTypeSelectValue: '', //任务类型查询条件
      taskPrioritySelectValue: '',//任务优先级查询条件

      taskTypeOptions: [  //任务类型查询条件选择
        {
          value: '0',
          label: 'Bug'
        },
        {
          value: '1',
          label: '需求开发'
        },
        {
          value: '2',
          label: '其他'
        },
        {
          value: '3',
          label: '优化'
        },
        {
          value: '4',
          label: '测试'
        },
      ],
      taskPriorityOptions: [
        {
          value: '0',
          label: '低'
        },
        {
          value: '1',
          label: '中'
        },
        {
          value: '2',
          label: '高'
        },
        {
          value: '3',
          label: '紧急'
        },
      ],
      tabsActiveName: 'taskOverview',//tabs的跳转绑定（默认打开任务总览）

      projectInfo: {//项目人员分配部分的项目详细信息封装
        projectId: '暂无',
        projectName: '暂无',
        createUserName: '暂无',
        projectLeaderName: '暂无',
        createTime: '暂无',
        CompletionTime: '暂无',
        projectStatusName: '暂无'
      },
      projectAddUserList: [], //项目人员分配新增组员绑定
      allUserShowData: [],//项目人员分配可选的员工集合
      projectUsersList: [],//当前项目的员工集合

      delUserFormProjectVisible: false, //移除项目组员小弹窗显示
      userInfoDialogVisible: false,//用户信息弹窗显示
      userInfo: {},//用户信息弹窗显示
      showDate: { //转化后展示的日期
        crateDate: '',
        completeDate: '',
      },

      editTaskEntity: {},//绑定要修改的任务实体
      editTaskRules: {
        taskName: [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
        projectId: [
          {required: true, message: '请选择所属项目', trigger: 'blur'}
        ],
        taskPriority: [
          {required: true, message: '请选择任务优先级', trigger: 'blur'}
        ],
        taskDescription: [
          {required: true, message: '请输入任务描述', trigger: 'blur'}
        ]
      },
      editTaskVisible: false, //编辑任务窗口显示
      projectList: [],//task编辑功能项目下拉选择实体
      taskPriorityList: [
        {name: '低', value: 0},
        {name: '中', value: 1},
        {name: '高', value: 2},
        {name: '紧急', value: 3}
      ],

      sendTaskId: '',//绑定要分配的任务id
      sendTaskVisible: false, //分配任务窗口显示
      sendableUsers: [], //可分配的用户集合
      sendableUsersSearch: '',//task分配用户表格的搜索绑定

      addTaskEntity: {}, //添加任务实体绑定
      addTaskVisible: false, //添加任务窗口显示


    }
  },
  mounted() {
    //加载页面时加载出echarts数据
    //饼图
    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);
    pieChart.setOption(option)

    //查询出当前用户管理的项目，可供条件选中
    this.$request.get("/project/getMyManagerProjects", {
      params: {
        userId: this.loginUser.uid
      }
    }).then(res => {
      if (res.successFlag) {
        this.projectSelectOptions = res.data
      } else {
        this.$message.error("查看项目列表失败！")
      }
    })
    //默认查询出当前用户所管理的项目的所有任务
    this.$request.get("/task/getTaskConditionalQueryByPageForManager", {
      params: {
        userId: this.loginUser.uid,
        currentPage: this.pageNum,
        pageSize: this.pageSize,
        taskStatus: this.tabPosition,
        projectSelectValue: this.projectSelectValue,
        taskTypeSelectValue: this.taskTypeSelectValue,
        taskPrioritySelectValue: this.taskPrioritySelectValue
      }
    }).then(res => {
      if (res.successFlag) {
        this.TaskTableData = res.data.pageData
        this.total = res.data.totalData
      } else {
        this.$message.error("查看任务失败！")
      }
    })
    //加载打工人排行（默认加载当前项目组长所管理的所有项目的总排行）
    this.$request.get("/user/getEmployeeRanking", {
      params: {
        projectId: this.staffProjectSelectleValue,
        userId: this.loginUser.uid
      }
    }).then(res => {
      if (res.successFlag) {
        this.EmployeeRankingData = res.data
      } else {
        this.$message.error("查看排名失败！")
      }
    })
  },
  methods: {
    switchTaskPriority(priorityNum) {
      let reslut = {
        tagStyle: '',
        priorityName: ''
      }
      if (priorityNum === '0') {
        reslut.tagStyle = 'info'
        reslut.priorityName = '低'
        return reslut
      } else if (priorityNum === '1') {
        reslut.tagStyle = ''
        reslut.priorityName = '中'
        return reslut
      } else if (priorityNum === '2') {
        reslut.tagStyle = 'danger'
        reslut.priorityName = '高'
        return reslut
      } else {
        reslut.tagStyle = 'warning'
        reslut.priorityName = '紧急'
        return reslut
      }
      return reslut
    },

    switchTaskType(typeNum) {
      let reslut1 = {
        iconStyle: '',
        typeName: ''
      }
      if (typeNum === 0) {
        reslut1.iconStyle = 'iconfont iconbug'
        reslut1.typeName = 'Bug'
        return reslut1
      } else if (typeNum === 1) {
        reslut1.iconStyle = 'iconfont iconkaifa'
        reslut1.typeName = '开发'
        return reslut1
      } else if (typeNum === 2) {
        reslut1.iconStyle = 'iconfont iconqita'
        reslut1.typeName = '其他'
        return reslut1
      } else if (typeNum === 3) {
        reslut1.iconStyle = 'iconfont iconyouhua'
        reslut1.typeName = '优化'
        return reslut1
      } else if (typeNum === 4) {
        reslut1.iconStyle = 'iconfont iconAPIceshi'
        reslut1.typeName = '测试'
        return reslut1
      }
      return reslut1
    },
    switchTaskStatus(statusNum) {
      //任务状态 （0：创建未处理/1:处理中/2:挂起/3:已完成待测试/4:测试通过/5:测试未通过/6:任务关闭）
      let reslut2 = {
        color: '',
        statusName: ''
      }
      if (statusNum === 0) {
        reslut2.color = '#909399'
        reslut2.statusName = '创建未处理'
        return reslut2
      } else if (statusNum === 1) {
        reslut2.color = '#94c3f3'
        reslut2.statusName = '处理中'
        return reslut2
      } else if (statusNum === 2) {
        reslut2.color = '#E6A23C'
        reslut2.statusName = '挂起'
        return reslut2
      } else if (statusNum === 3) {
        reslut2.color = '#409EFF'
        reslut2.statusName = '已完成待测试'
        return reslut2
      } else if (statusNum === 4) {
        reslut2.color = '#67C23A'
        reslut2.statusName = '测试通过'
        return reslut2
      } else if (statusNum === 5) {
        reslut2.color = '#F56C6C'
        reslut2.statusName = '测试未通过'
        return reslut2
      } else if (statusNum === 6) {
        reslut2.color = '#909399'
        reslut2.statusName = '任务关闭'
        return reslut2
      }
      return reslut2
    },
    //通过id精确匹配和任务名称模糊匹配
    selectTaskByIdOrName() {
      this.$request.get("/task/selectTaskByIdOrName", {
        params: {
          selectValue: this.searchValue,
          userId: this.loginUser.uid,
          currentPage: this.pageNum,
          pageSize: this.pageSize,
          taskStatus: this.tabPosition,
          projectSelectValue: this.projectSelectValue,
          taskTypeSelectValue: this.taskTypeSelectValue,
          taskPrioritySelectValue: this.taskPrioritySelectValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.TaskTableData = res.data.pageData
          this.total = res.data.totalData
        } else {
          this.$message.error("查看任务失败！")
        }
      })
    },

    //根据所属项目、任务类型、任务级别作为查询条件去查询分页数据
    taskConditionalQueryByPage() {
      this.$request.get("/task/getTaskConditionalQueryByPageForManager", {
        params: {
          userId: this.loginUser.uid,
          currentPage: this.pageNum,
          pageSize: this.pageSize,
          taskStatus: this.tabPosition,
          projectSelectValue: this.projectSelectValue,
          taskTypeSelectValue: this.taskTypeSelectValue,
          taskPrioritySelectValue: this.taskPrioritySelectValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.TaskTableData = res.data.pageData
          this.total = res.data.totalData
        } else {
          this.$message.error("查看任务失败！")
        }
      })
    },

    //查询重置
    conditionReset() {
      //查询条件重置
      this.projectSelectValue = ''
      this.taskTypeSelectValue = ''
      this.taskPrioritySelectValue = ''
      this.tabPosition = 'all'
      this.searchValue = ''
      this.taskConditionalQueryByPage()
    },

    change(pageNum) {
      this.pageNum = pageNum;
      this.taskConditionalQueryByPage();
    },

    async changeTab(queryCriteria) {
      //选择了任务状态作为条件，把分页参数重置
      this.pageNum = 1
      this.tabPosition = queryCriteria
      await this.taskConditionalQueryByPage()
    },
    //查看任务详情，获取此条任务的任务id并跳转”我的任务“模块展示
    viewTaskDetails(taskId) {
      // 调用另一个组件的方法
      localStorage.setItem("selectTaskId", taskId)
      this.$router.push('/mytasks')
    },

    //跳转到任务管理（携带选中的任务id）
    toTaskManagement(taskId) {
      //1.显示出任务管理界面
      this.tabsActiveName = 'taskManagement'
      //2.发送请求获取当前taskId对应的task的详细数据
    },
    getEmployeeRanking() {
      //加载打工人排行（默认加载当前项目组长所管理的所有项目的总排行）
      this.$request.get("/user/getEmployeeRanking", {
        params: {
          projectId: this.staffProjectSelectleValue,
          userId: this.loginUser.uid
        }
      }).then(res => {
        if (res.successFlag) {
          this.EmployeeRankingData = res.data
        } else {
          this.$message.error("查看排名失败！")
        }
      })
    },
    //重置打工人排行榜
    reSetEmployeeRanking() {
      this.staffProjectSelectleValue = ''
      this.getEmployeeRanking()
    },
    //重置人员项目分配
    reSetProjectPersonnelAllocation() {
      this.projectPersonnelAllocationValue = ''
      this.projectAddUserList = ''
      this.allUserShowData = []
      this.projectUsersList = []
      let OriginProjectInfo = {//项目人员分配部分的项目详细信息封装
        projectId: '暂无',
        projectName: '暂无',
        createUserName: '暂无',
        projectLeaderName: '暂无',
        createTime: '暂无',
        CompletionTime: '暂无',
        projectStatus: '暂无'
      }
      this.projectInfo = OriginProjectInfo
    },
    //选中人员分配项目发送请求获取（1.项目信息、项目组员集合、可分配的员工列表集合）
    async getAllShowDataForDistribution() {
      //获取项目信息
      await this.$request.get("/project/getProjectInfoById", {
        params: {
          projectId: this.projectPersonnelAllocationValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.projectInfo = res.data
          //日期转化
          this.timeFormatConversion(this.projectInfo)
        } else {
          this.$message.error("查询项目详情失败！")
        }
      })

      //获取项目组员信息
      await this.$request.get("/user/getProjectEmployees", {
        params: {
          loginUser: localStorage.getItem("loginUser"),
          projectId: this.projectPersonnelAllocationValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.projectUsersList = res.data
        } else {
          this.$message.error("查询项目组员信息失败！")
        }
      })

      //获取可以添加入项目的用户信息
      await this.$request.get("/user/getCanAddedEmployees", {
        params: {
          projectId: this.projectPersonnelAllocationValue
        }
      }).then(res => {
        if (res.successFlag) {
          this.allUserShowData = res.data
        } else {
          this.$message.error("查询可添加的组员信息失败！")
        }
      })
    },

    //向指定项目添加组员
    async addProjectMembers() {
      await this.$request.post("/project/addProjectMembers" + "?projectId="
          + this.projectPersonnelAllocationValue, this.projectAddUserList).then(res => {
        if (res.successFlag) {
          //添加成功，刷新 项目组员信息、员工列表、 新增项目成员
          this.$message.success("项目组员添加成功！")
          this.getAllShowDataForDistribution();
          this.projectAddUserList = []
        } else {
          this.$message.error("项目组员添加失败！")
        }
      })
    },

    //讲当前用户移除当前项目
    async removeFormProject(userId) {
      await this.$request.delete("/project/removeFormProject" + "?projectId=" + this.projectPersonnelAllocationValue
          + "&userId=" + userId).then(res => {
        if (res.successFlag) {
          //添加成功，刷新 项目组员信息、员工列表、 新增项目成员
          this.$message.success("项目组员删除成功！")
          this.getAllShowDataForDistribution();
          this.projectAddUserList = []
          this.delUserFormProjectVisible = false
        } else {
          this.$message.error("项目组员删除失败！")
          this.delUserFormProjectVisible = false
        }
      })
    },
    //显示员工详情信息
    showUserInfo(userId) {
      //弹窗显示
      this.userInfoDialogVisible = true
      //根据userId找到用户信息绑定到userInfo中
      this.projectUsersList.forEach(user => {
        // 找到 uid 为 7 的对象
        if (user.uid === userId) {
          // 将找到的对象赋值给 userInfo
          this.userInfo = user
        }
      });
    },
    //日期转换
    timeFormatConversion(projectInfo) {
      let create = projectInfo.createTime;
      let completion = projectInfo.completionTime;
      if (create != null) {
        const [year, month, day, hours, minutes] = projectInfo.createTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.showDate.crateDate = formattedTime
      } else {
        this.showDate.crateDate = '暂无日期'
      }

      if (completion != null) {
        const [year, month, day, hours, minutes] = projectInfo.completionTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.showDate.completeDate = formattedTime
      } else {
        this.showDate.completeDate = '暂无日期'
      }
    },
    //显示编辑任务弹窗
    showEditTask(task) {
      //1.绑定数展示
      this.editTaskEntity = task
      //2.让编辑窗口显示
      this.editTaskVisible = true
      this.$request.get("/project/getAllProject").then(res => {
        if (res.successFlag) {
          this.projectList = res.data
        } else {
          //提交失败，状态回滚
          this.$message.error("没有获取到项目list数据！")
          this.editTaskEntity = {}
        }
      })
    },
    //提交任务编辑
    async editTaskSubmit() {
      //关闭弹窗
      this.editTaskVisible = false
      //发送请求
      await this.$request.put("/task/editTaskSubmit", this.editTaskEntity).then(res => {
        if (res.successFlag) {
          location.reload();
          this.$message.success("修改成功！")
        } else {
          //提交失败，状态回滚
          this.$message.error("修改失败!")
          this.editTaskEntity = {}
        }
      })
    },

    //显示任务分配页面
    async showSendTask(task) {
      //1.绑定选中的taskId
      this.sendTaskId = task.taskId
      //2.显示分配窗口
      this.sendTaskVisible = true
      //发送请求，去后端查询可分配的用户数据
      await this.$request.get("/user/getAssignableUsers", {
        params: {
          loginUser: localStorage.getItem("loginUser"),
          projectId: task.projectId
        }
      }).then(res => {
        if (res.successFlag) {
          this.sendableUsers = res.data
        } else {
          this.$message.error("您没有任务分配权限！")
          this.assignButtonShow = true
        }
      })
    },

    //分配任务
    sendTask(changerUserId) {
      this.$request.put("/task/editTaskHandlerUser", {
        taskId: this.sendTaskId,
        taskHandlerId: changerUserId
      }).then(res => {
        if (res.successFlag) {
          this.$message.success("分配成功！")
          this.conditionReset()
          /*location.reload();*/
          this.sendTaskVisible = false

        } else {
          this.$message.error("分配失败！")
        }
      })
    },

    //添加任务窗口显示
    showAddTask(){
      //1.清空数据绑定
      this.addTaskEntity={}
      //2.显示添加任务窗口
      this.addTaskVisible=true
    },

    //添加任务功能
    addTask(){
      //1.将表单信息发送给后端
      this.$request.post("/task/addTask"+"?createUserId="+this.loginUser.uid,this.addTaskEntity).then(res=>{
        if (res.successFlag) {
          this.$message.success("添加任务成功！")
          this.conditionReset()
          this.addTaskVisible = false
        } else {
          this.$message.error("添加任务失败！")
          this.addTaskVisible = false
        }
      })
    },

    //删除任务功能
    delTask(taskId){
      this.$request.delete("/task/delTask"+"?taskId="+taskId).then(res=>{
        if (res.successFlag) {
          this.$message.success("删除任务成功！")
          this.conditionReset()
        } else {
          this.$message.error("删除任务失败！")

        }
      })
    }


  }
}
</script>

<style scoped>
.deepBackground {
  display: flex;
  align-items: center;
  justify-content: left;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100vh;
  flex-direction: column;
}

.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
  align-items: center;
  justify-content: center;
}

.el-transfer-panel {
  width: max-content;
}
</style>